<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:javascrit="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/plugins/iCheck/flat/blue.css}">
    <link rel="stylesheet" th:href="@{/bootstrap-table/bootstrap-table.css}">
    <title>标椎地名地址管理系统</title>
</head>
<body  >
<div >

    <!-- Content Wrapper. Contains page content -->
    <div >
        <!-- Content Header (Page header) -->
        <section class="content-header">

            <ol class="breadcrumb">


                <a th:href="@{/User/tozhuye}"><input  type="button"  value="回到主页" /></a>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content container-fluid  ">
            <div class="row">

                <div class="col-md-3  ">

                    <!-- Profile Image -->
                    <br>
                    <div class="box box-primary ">

                        <div class="box-body box-profile ">
                            <img class="profile-user-img img-responsive img-circle" id="Avatar" th:src="@{/adminlte/dist/img/user8-128x128.jpg}" alt="User profile picture">
                            <br>
                             <a href='javascript:change();'>更换头像</a>
                            <p class="text-muted text-center">基本信息</p>
                            <input type="hidden" th:value="${user.userId}" id="userId">

                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>用户名</b> <a class="pull-right"><span class="hidden-xs" th:text="${user.userName}"></span></a>
                                </li>
                                <li class="list-group-item">
                                    <b>密码</b> <a class="pull-right" th:href="@{'/User/upate?id='+${user.userId}}"><span>更改密码</span></a>
                                </li>
                                <li class="list-group-item">
                                    <b>联系方式</b> <a class="pull-right"><span class="hidden-xs" th:text="${user.linkWay}"></span></a>
                                </li>

                            </ul>

                            <br>
                            <br>
                            <h5 class="box-title  text-center">其他信息</h5>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>住址</b> <a class="pull-right"><span class="hidden-xs" th:text="${user.address}"></span></a>
                                </li>
                                <li class="list-group-item">
                                    <b>生日</b> <a class="pull-right"><span class="hidden-xs" th:text="${user.bir}"></span></a>
                                </li>
                                <li class="list-group-item">
                                    <b>个人备注</b> <a class="pull-right"><span class="hidden-xs" th:text="${user.userRemark}"></span></a>
                                </li>

                            </ul>
                            <a href="#" onclick="edit()" class="btn btn-primary btn-block"><b>修改资料</b></a>
                        </div>
                        <!-- /.box-body -->
                    </div>

                </div>

                <!-- /.col -->

                <br>
                <div class="col-md-9">
                    <div class="box box-info">
                        <div class="box-body">
                            <div id="toolbar">
                                <div class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="keyword">Keyword: </label>
                                        <input name="keyword" class="form-control" type="text" id="keyword">
                                    </div>
                                    <button id="searchBtn" type="submit" class="btn btn-primary" style="margin-left: 5px">
                                        查询
                                    </button>
                                    <!--<a href="/Street/toadd">-->
                                    <!--<button id="createBtn" type="submit" class="btn btn-info" style="margin-left: 30px">-->
                                    <!--录入-->
                                    <!--</button>-->
                                    <!--</a>-->
                                    <!--<button id="deleteBtn" type="submit" class="btn btn-danger">删除</button>-->
                                </div>
                            </div>
                            <table id="dataTable" class="table table-hover table-responsive"
                                   style="table-layout: fixed"></table>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
            </div>

        </section>

    </div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/adminlte/dist/js/adminlte.min.js}"></script>

<script th:src="@{/adminlte/bower_components/layer-v3.1.1/layer/layer.js}"></script>

<script th:src="@{/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script lanage="javascript">
    function change(){
        document.getElementById("Avatar").src="/adminlte/dist/img/user7-128x128.jpg "; //这里的图片是更换后的图片
    }
</script>
<script>

    var id = $("#userId").val();
    function edit(){

        // alert(id);
        layer.open({
            type: 2,  //打开一个iframe
            title: '编辑',
            content: '/User/form?id=' + id,
            maxmin: true,
            area: ['500px', '300px'],
            btn: ['确定', '取消'],
            yes: function(index, layero){
                // 点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#lay-form-submit");
                submit.click();
            }
        });
    }
    $('#test2').on('click', function(){
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">\<\/div>'
        });
    });


    $('#dataTable').bootstrapTable({
        method: 'get',
        url: "/User/api/searchByUser?id=" + id,
        // toolbar: '#toolbar',
        // striped: true,
        dataField: "applies",
        pageNumber: 1,
        pagination: true,
        queryParamsType: 'limit',
        queryParams: queryParams,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100],
        // search: true,
        showRefresh: false,
        clickToSelect: true,
        toolbarAlign: 'left',
        buttonsAlign: 'right',
        toolbar: '#toolbar',
        showColumns: true,
        columns: [
            {
                title: '全选',
                field: 'select',
                checkbox: true,
                width: 25,
                align: 'center',
            },
            {
                title: 'ID',
                field: 'applyId',
                visible: false,
                width: 160
            },
            // {
            //     title: 'Edit',
            //     width: 50,
            //     formatter: function (value, row, index, field) {
            //         return [
            //             '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
            //             '<i class="glyphicon glyphicon-edit"></i>',
            //             '</a>',
            //         ].join('');
            //     },
            //     events: {
            //         'click .edit': function (e, value, row, index) {
            //             window.location.href = '/Apply/edit?id=' + row.applyId;
            //         }
            //     },
            //     align: 'center'
            // },
            {
                title: 'UserName',
                field: 'user.userName',
                width: 160,
                align: 'center'
            },
            {
                title: 'DoorNumber',
                field: 'door.doorNumber',
                width: 160,
                align: 'center',
                // formatter:function (arr) {
                //     doorsArr = [];
                //     arr.forEach(function (data) {
                //         doorsArr.push(" [ "+ data.doorNumber + " : " +data.street.streetName + " : " + data.street.area.areaName + " ] ");
                //     });
                //     return doorsArr.join(" , ");
                // }
            },
            {
                title: 'StreetName',
                field: 'door.street.streetName',
                width: 160,
                align: 'center',
                // formatter:function (arr) {
                //     doorsArr = [];
                //     arr.forEach(function (data) {
                //         doorsArr.push(data.street.streetName);
                //     });
                //     return doorsArr.join(",");
                // }
            },
            {
                title: 'AreaName',
                field: 'door.street.area.areaName',
                width: 160,
                align: 'center',
                // formatter:function (arr) {
                //     doorsArr = [];
                //     arr.forEach(function (data) {
                //         doorsArr.push(data.street.area.areaName);
                //     });
                //     return doorsArr.join(",");
                // }
            },
            {
                title: 'Time',
                field: 'applyTime',
                width: 160,
                formatter: function (value, row, index, field) {
                    if (value) {
                        return format2Date(new Date(value), "yyyy-MM-dd hh:mm:ss");
                    }
                    return "";
                },
                align: 'center'
            },
            {
                title: 'State',
                field: 'state',
                width: 160,
                align: 'center'
            },
            {
                title: 'Operate',
                width: 50,
                formatter: function (value, row, index, field) {
                    // alert(row.door.userId);
                    if (row.state == '审核中'){
                        return [
                            '<a class="cancel ml10" href="javascript:void(0)" title="Cancel">Cancel</a>',
                        ].join('');
                    } else if(row.state == '已取消' || row.state == '未通过'){

                        if(row.door.userId == null) {
                            return [
                                '<a class="reissue ml10" href="javascript:void(0)" title="Reissue">Reissue</a>',
                            ].join('');
                        }else {
                            return [''].join('');
                        }
                    } else{
                        return [''].join('');
                    }
                },
                events: {
                    'click .cancel': function (e, value, row, index) {
                        window.location.href = '/Apply/cancel?id=' + row.applyId;
                    },
                    'click .reissue': function (e, value, row, index) {
                        window.location.href = '/Apply/reissue?id=' + row.applyId;
                    },
                },
                align: 'center'
            }
        ],
        locale: 'zh-CN',
        responseHandler: function (data) {
            return data;
        }
    });

    function format2Date(date, fmt) {
        var o = {
            "M+": date.getMonth() + 1, // 月份
            "d+": date.getDate(), // 日
            "h+": date.getHours(), // 小时
            "m+": date.getMinutes(), // 分
            "s+": date.getSeconds(), // 秒
            "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
            "S": date.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function queryParams(params) {
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            keyword: $('#keyword').val()
        }
    }

    $("#deleteBtn").click(function () {
        var selects = $('#dataTable').bootstrapTable('getSelections');
        console.log(selects);
        //var str = JSON.stringify(selects);
        layer.confirm("确定删除吗",{icon: 3,title: "提示"}, function(index) {
            for (var i = 0; i < selects.length; i++) {
                //alert(selects[i].areaId);
                $.ajax({
                    url: "/Apply/delete?id=" + selects[i].streetId,
                    method: "delete",
                    success: function (data) {
                        if (data == true) {
                            // $(elem).parent().parent().remove()
                            layer.msg("操作成功", {time: 700}, function () {
                                $('.selected').remove();
                                console.log("成功")
                            });
                        } else {
                            console.log("失败");
                        }
                    },
                    fail: function (data) {
                        console.log(data);
                    }
                })
            }
        });

    });

    $("#searchBtn").click(function () {
        //$('#dataTable').bootstrapTable('refresh');
        var input = $('#keyword').val()
        // $('table tbody tr').hide()
        //     .filter(":contains('" + ($('#keyword').val()) + "')")
        //     .show();
        $('#dataTable').bootstrapTable('refresh', {
            url: "/User/api/searchLikeByUser?keywords=" + input + "&id=" +id
        });
    });

</script>


<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>


</html>